import React, {Component} from 'react';
import Banner from "../../components/Banner/Banner";
import HotCmd from "../../components/HotCmd/HotCmd";
import TopFlag from "../../components/TopFlag/TopFlag";
import './Cmd.less'
class Cmd extends Component {
    constructor(props) {
        super(props);
        this.state={
            banners:[],//轮播图
            hotPlaylist:[],//歌单
            topList:[],//排行榜
            dayCmd:[],//每日推荐歌单
            artists:[],//入驻歌手
            tabs:['华语','流行','摇滚','民谣','电子'],
        }
    }
    componentDidMount() {
        /**
         *  调用此接口 , 可获取 banner( 轮播图 ) 数据
         *  接口地址 : /banner
         *  调用例子 : /banner
         */
        fetch(`http://localhost:3000/banner`)
            .then(res=>res.json())
            .then(res=>{
                this.setState({
                    banners:res.banners
                })
            });

        /**
         * 推荐歌单
         * 调用例子 : /personalized
         */
        fetch(`http://localhost:3000/personalized?limit=8`)
            .then(res=>res.json())
            .then(res=>{
                this.setState({
                    hotPlaylist:res.result
                })
            });

        /**
         * 获取每日推荐歌单
         * 说明 : 调用此接口 , 可获得每日推荐歌单 ( 需要登录 )
         * 调用例子 : /recommend/resource
         */
        fetch(`http://localhost:3000/login/cellphone?phone=13093640277&password=zhaoqi5211314`)
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
                fetch(`http://localhost:3000/recommend/resource`,{
                    method:"get",
                    credentials: "include"
                })
                    .then(res=>res.json())
                    .then(res=>{
                         res=JSON.stringify(res);
                         res=res.replace(/playcount/g,'playCount');
                         res=JSON.parse(res);
                        console.log(res)
                         // res.recommend.length=3;
                        this.setState({
                            dayCmd:res.recommend
                        })
                    });
            });

        /**
         * 新碟上架
         * 说明 : 调用此接口 , 可获取新碟上架列表 , 如需具体音乐信息需要调用获取专辑列表接 口 /album , 然后传入 id, 如
         * /album?id=32311&limit=30
         * 可选参数 : limit: 取出数量 , 默认为 50
         * offset: 偏移数量 , 用于分页 , 如 :( 页数 -1)*50, 其中 50 为 limit 的值 , 默认 为 0
         * 调用例子 : /top/album?offset=0&limit=30
         */
        fetch(`http://localhost:3000/top/album?offset=0&limit=10`)
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
            });
        /**
         * 排行榜
         * 说明 : 调用此接口 , 传入数字 idx, 可获取不同排行榜
         * 必选参数 : idx: 对象 key, 对应以下排行榜
         * "3": 云音乐飙升榜,
         * "0": 云音乐新歌榜,
         * "2": 网易原创歌曲榜,
         */
        [0,1,2].map((item,index)=>{
            fetch(`http://localhost:3000/top/list?idx=${item}`)
                .then(res=>res.json())
                .then(res=>{
                    this.setState((prev,current)=>{
                        prev.topList.push(res)
                    })
                });
            return null;
        });
        /**
         *  歌手分类列表
         *  说明 : 调用此接口,可获取歌手分类列表 必选参数 : cat : 即 category Code,歌手类型,默认 1001,返回华语男歌手数据
         *  limit : 返回数量 , 默认为 30
         *  offset : 偏移数量，用于分页
         *  category Code 取值:入驻歌手 5001
         *  /artist/list?cat=1001
         */
        fetch(`http://localhost:3000/artist/list?cat=5001&limit=5`)
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
                this.setState({
                    artists:res.artists
                })
            });
    }

    render() {
        const {banners,hotPlaylist,dayCmd,tabs,topList,artists} =this.state;

        return (
            <div>
                {/*轮播图*/}
                {
                    banners.length>0?
                        <Banner banners={banners}/>
                        :
                        <div>数据加载中</div>
                }
                <div className='wrap'>
                    <div className='left'>
                        {/*热门推荐*/}
                        <HotCmd list={hotPlaylist} title='热门推荐' more={true} tabs={tabs}/>
                        {/*个性化推荐*/}
                        <HotCmd list={dayCmd} title='个性化推荐'  calendar={true} type={1}/>
                        {/*新碟上架*/}
                        <HotCmd list={hotPlaylist} title='新碟上架' more={true} />
                        {/*榜单*/}
                        {
                            topList.length>0?
                            <TopFlag list={topList} title='榜单' more={true} />
                            :''
                        }
                    </div>

                    <div className='right'>
                        <div className='userInfo'>
                            <div className='f-cb'>
                                <img src="http://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg?param=80y80" alt=""/>
                                <div>
                                    <h4>晁阳123</h4>
                                    <p>Lv3</p>
                                    <button>签到</button>
                                </div>
                                <ul>
                                    <li>
                                        <strong>0</strong>
                                        <span>动态</span>
                                    </li>
                                    <li>
                                        <strong>3</strong>
                                        <span>关注</span>
                                    </li>
                                    <li>
                                        <strong>0</strong>
                                        <span>粉丝</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className='n-singer'>
                            <h3>
                                <span>入驻歌手</span>
                                <span>查看全部 ></span>
                            </h3>
                            <ul>
                                {
                                    artists.length>0?
                                        artists.map((item,index)=>{
                                            return(
                                                <li key={index}>
                                                    <img src={item.picUrl} alt=""/>
                                                    <div className='ifo'>
                                                        <h4>{item.name}</h4>
                                                        <p>台湾歌手张惠妹</p>
                                                    </div>
                                                </li>
                                            )
                                        })

                                        :''
                                }
                            </ul>
                            <button>申请成为网易音乐人</button>
                        </div>
                        <div className='n-dj n-singer'>
                            <h3>
                                <span>热门主播</span>
                            </h3>
                            <ul>
                                <li>
                                    <img src="http://p2.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40" alt=""/>
                                    <div className='ifo'>
                                        <h4>陈立</h4>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                                <li>
                                    <img src="http://p2.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40" alt=""/>
                                    <div className='ifo'>
                                        <h4>陈立</h4>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                                <li>
                                    <img src="http://p2.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40" alt=""/>
                                    <div className='ifo'>
                                        <h4>陈立</h4>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                                <li>
                                    <img src="http://p2.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40" alt=""/>
                                    <div className='ifo'>
                                        <h4>陈立</h4>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                                <li>
                                    <img src="http://p2.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40" alt=""/>
                                    <div className='ifo'>
                                        <h4>陈立</h4>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                                <li>
                                    <img src="http://p2.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40" alt=""/>
                                    <div className='ifo'>
                                        <h4>陈立</h4>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Cmd;